<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.container {
			/* 设置子元素的布局为flex布局 */
			width: 600px;
			/* height: 400px; */
			display: flex;
			flex-direction: row;
			/* 设置项目主轴方向上的对齐方式 */
			justify-content: flex-start;
			flex-wrap: wrap;

			justify-content: space-between;

		}


		.item {
			/* 设置项目占用空间为50px */
			/* flex-basis: 100px; */
			height: 100px;
			background: rgba(110, 0, 0, .1);
			margin-right: 1px;
			/* 设置项目占用主轴空间 */
			flex-basis: 49%;

		}
	</style>
	<!-- 
	 https://blog.csdn.net/chenjiebin/article/details/120476964
	 
	 
	 -->
	<body>


		<div class="container">
			<div class="item item1">item1</div>
			<div class="item item2">item2</div>
			<div class="item item3">item3</div>
			<div class="item item4">item4</div>
			<div class="item item5">item5</div>
			<div class="item item6">item6</div>
		</div>


	</body>
</html>
